<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        /*头部和底部共同样式*/
        .header,
        .footer{background: #ff9999;text-align: center;height: 50px;line-height: 50px;}
        /*中间、左侧及右侧共同样式*/
        .left,
        .middle,
        .right{position: relative;float: left;min-height: 130px;line-height: 130px;text-align: center;}
        /*主体部分样式*/
        .container{padding: 0 220px 0 200px;overflow: hidden;}
        /*主体左侧样式*/
        .left{margin-left: -100%;left: -200px;width: 200px;background: #99ffff;}
        /*主体右侧的样式*/
        .right{margin-left: -220px;right: -220px;width: 220px;background: #ccff99;}
        /*主体中间样式*/
        .middle{width: 100%;background: #cff;word-break: break-all;}
        /*底部样式*/
        .footer{clear: both;}
    </style>
</head>
<body>
    <!--头部-->
    <div class="header">
        <h4>header</h4>
    </div>
    <!--主体-->
    <div class="container">
        <div class="middle">
            <h4>middle middle 部分首先要放在 container 的最前部分.然后是 left,right</h4>
        </div>
        <div class="left">
            <h4>left</h4>
        </div>
        <div class="right">
            <h4>right</h4>
        </div>
    </div>
    <!--底部-->
    <div class="footer">
        <h4>footer</h4>
    </div>

</body>
</html>